<script setup lang="ts">


import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
import {inject, onMounted, reactive, ref, watch} from 'vue'
import {cellHeight, cellWidth} from "@/views/yz/layout/layout-const";

const activeElement = inject('activeElement')
const activeIndex = inject('activeIndex')
const elements = inject('elements')
const changeActiveElement = inject('changeActiveElement')
const emits = defineEmits(['change'])
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const formData = ref({
  name: undefined,
  boxObj: {
    x: undefined,
    y: undefined,
    width: undefined,
    height: undefined
  },
  style: '',
  content: ''
})
const initElement = () => {
  formData.value = activeElement.value
  // 没有初始化，进行初始化
  if(activeElement.value.type ==='interactiveText' &&activeElement.value.init){
    formData.value.boxObj = {
      x: 0,
      y: 0,
      w: cellWidth/2,
      h: cellHeight/2,
    }
    formData.value.init = false
    changeActiveElement(activeElement.value)
  }
}

onMounted(initElement)
watch(activeIndex, (val) => {
      initElement()
    }
)
const tip = '{{参数名}} 中的变量将被对应的实际值替换，参数名可参看驿站变量列表'
</script>

<template>
  <el-form
    ref="formRef"
    label-width="100px"
  >
    <el-form-item label="名称" prop="name">
      <el-input v-model="formData.name" placeholder="请输入图元名称"/>
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-select v-model="formData.type" disabled>
        <el-option
          v-for="dict in getStrDictOptions(DICT_TYPE.SCREEN_ELEMENT_TYPE)"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="位置">
      <span class="short-input-label">X:</span>
      <el-input class="short-input" v-model="formData.boxObj.x"/>
      <span class="short-input-label">Y:</span>
      <el-input class="short-input" v-model="formData.boxObj.y"/>
    </el-form-item>
    <el-form-item label="大小">
      <span class="short-input-label">宽:</span>
      <el-input class="short-input" v-model="formData.boxObj.w"/>
      <span class="short-input-label">高:</span>
      <el-input class="short-input" v-model="formData.boxObj.h"/>
    </el-form-item>
    <el-form-item label="层级">
      <el-input-number v-model="formData.layer"/>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <el-input type="textarea" v-model="formData.content" :autosize="{ minRows: 2, maxRows: 6 }"/>
      <br/>
      <div class="comment">{{ tip }}</div>
    </el-form-item>

    <el-form-item label="CSS高级样式">
      <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="formData.style"/>
    </el-form-item>

    <el-form-item label="规则" prop="ruleJsonStr">
      <el-input type="textarea" v-model="formData.ruleJsonStr" :autosize="{ minRows: 2, maxRows: 6 }"/>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.short-input {
  width: 80px;
}

.short-input-label {
  margin: 0 8px;
  width: 20px;
  text-align: right;
}
</style>
